 <div id="login" class="lgn-modal reveal-modal tiny" data-reveal><!--data-options="close_on_background_click: false"-->
  <div class="mdl-in-wrapper row" style="padding:.8rem;">
  <form id="myLogin" data-abide="ajax">
   <fieldset id="login_form" style="padding:0;border:0;">
      <div class="error_message2 text-left large-12 columns" style="padding:0;">
    </div>
    <div class="email-field form-mdl large-12 columns">
       <input type="email" name="email" placeholder="Email Address" required />
       <small class="regerr error" style=""><i class="fa fa-exclamation-circle fa-lg" style="color:#E8877D"></i> Enter your Email</small>
    </div>
    <div class="pword-field form-mdl large-12 columns">
        <input type="password" name="password" placeholder="Password" required pattern="[a-zA-Z0-9]+" />
        <small class="regerr error" style=""><i class="fa fa-exclamation-circle fa-lg" style="color:#E8877D"></i> Enter your password</small>
        <div class="large-6 column"><input type="checkbox"><label>Remember me</label></div>
        <div class="text-right large-6 column"><a class="frgt" href="">Forgot password?</a></div>
    </div>    

    <div class="form-mdl large-12 columns">
        <button type="submit" id="btnLogin" class="lgn-btn-mdl button expand" style="background:#009ea1;">Get Started</button>
    </div>
    <hr class="hr-mdl-lgn">
    <div class="form-mdl large-12 columns">
            <a href="<?= BASE_URI.'users/fblogin' ?>" class="lgn-btn-mdl button expand " style="margin:0;background:#3B5998 !important;">Connect with Facebook</a>
    </div>
    </fieldset>
    </form>
  </div>
</div>

<div id="registration" class="lgn-modal reveal-modal tiny" data-reveal style="margin-top:-3rem;">
  <div class="mdl-in-wrapper row" style="padding:.8rem;">
   <h3 class="text-center"><strong>Registration</strong></h3> 
     <form id="myRegistration" data-abide="ajax">
   <fieldset id="registration_form" style="padding:0;border:0;margin:0;">
       <div class="error_message large-12 columns">

       </div>
       <div class="row">
        <div class="large-12 columns">
            <input type="text" name ="lastname" placeholder="Last Name" required />
            <small class="regerr error" style=""><i class="fa fa-exclamation-circle fa-lg" style="color:#E8877D"></i> Last name is required</small>
        </div>
        </div>
     
       <div class="row">
        <div class="large-12 columns">
            <input type="text" name="firstname" placeholder="First Name" required/>
            <small class="regerr error" style=""><i class="fa fa-exclamation-circle fa-lg" style="color:#E8877D"></i> First name is required</small>
        </div>
      </div>
       <div class="row">
        <div class="large-12 columns">
            <input id="ea" type="email" name="email" placeholder="Email Address" required />
            <small class="regerr error" style=""><i class="fa fa-exclamation-circle fa-lg" style="color:#E8877D"></i> Valid Email is required</small>
        </div>
      </div>
  
       <div class="row">
        <div class="large-12 columns">

            <p style="margin-bottom:-.2rem;"><small>By clicking Register, You agree to Behomebased's <a href="">Terms of Service</a> and <a href="">Privacy Policy</a></small> </p>

            <button type="submit" href="#" id="register" class="loading_areas lgn-btn-mdl button expand" style="background:#009ea1;margin-top:-2rem">Create Account</button>

            <br><p style="margin-top:-1.3rem;margin-bottom:.5rem;"><small>Already a Behomebased member?<a href=""> Login</a></small></p>
        </div>
      </div>
    </fieldset>
  </form>
  </div>
</div> 



<div id="loading" class="lgn-modal reveal-modal tiny" data-reveal data-options="close_on_background_click: false">
    <center><h5>Loading Please Wait... </h5><img src="<?=BASE_URI?>img/loading.gif"></center>
</div>



<div id="error" class="lgn-modal reveal-modal tiny" data-reveal>

</div>



<script>
$('#myLogin').on('valid', function(event) {
    event.preventDefault();
    var data = $(this).serialize();
    
    showLoading('#btnLogin');
    $.ajax({
        url: URL + 'users/login',
        type: 'post',
        data: {user_data:data},
        dataType:'json',
        success: function(result){
            setTimeout(function(){hideLoading2('#btnLogin');},2000);
            if(result.status == true)
            {
              setTimeout(function(){ window.location.replace(result.link); }, 1000); 
            }
            else if(result.status == false)
            {
              setTimeout(function(){ showErrorMessage(result.messages,'.error_message2') }, 2300);
            }
            else if(result.status == "inactive")
            {
                setTimeout(function(){ window.location.replace(result.link); }, 1000);
            }
        }

    });

    return false;
});
// registration
$("#myRegistration").on('valid',function(event){
        event.preventDefault();
        var data = $('#registration_form').serialize();
        var email = $('#ea').val();
        //validation here
     
        // if everything goes welL
        showLoading('.loading_areas');
        $.ajax({
          url: URL + 'users/register',
          type: 'post',
            data: {user_data:data},
            dataType: 'json',
            async: true,
            success: function(result)
            {
                  setTimeout(function(){hideLoading('.loading_areas');},2000);
               console.log(result);
              if(result.status == true)
                  {
                      window.location.replace(URL + 'registration/confirm?ea=' + email);
                  }
                  else
                  {           
                      //alert(result.messages);
                      setTimeout(function(){ showErrorMessage(result.messages,'.error_message') }, 1000);  
                  }

            }

        });

       // $('#login').foundation('reveal', 'close');
        return false;
 }); 


</script>




